<template>
    <div>
        <div class="flex" >
            <div>选择打印纸张：</div>
            <a-radio-group v-model="prinType" :options="prinOptions" ></a-radio-group>
        </div>
        <div class="scllo">
            <div id="tihuoContent">
                <div class="box" v-for="(item,index) in list" :key="index" :style="{height:prinType == 1?'297mm':prinType == 2?'148.5mm':'100mm',width:prinType == 1?'210mm':prinType == 2?'240mm':'240mm',padding: prinType == 1?'10mm':'10mm 24mm'}">
                    <div class="flex justify_center" style="font-size: 16px;font-weight: 600;">四川威斯腾物流有限公司</div>
                    <div class="flex justify_center" style="font-size: 16px;font-weight: 600;margin-bottom: 6px;">提货签收单</div>
                    
                    <div class="flex justify_between" style="margin-bottom: 8px;">
                        <div>提货人名称：{{deptName}}</div>
                        <div>{{props.process_time}}</div>
                    </div>
                    <div class="border" style="margin-bottom: 4px;">
                        <div class="flex ">
                            <div class="padd12 bor_r bor_b center" style="width: 80px;">
                                <div>序号</div>
                            </div>
                            <div class="padd12 bor_r bor_b center" style="width: 140px;">
                                <div>运单号</div>
                            </div>
                            <div class="padd12 bor_r bor_b center flex_1" style="width: 140px;">
                                <div>品名</div>
                            </div>
                            <div class="padd12 bor_r bor_b center flex_1" style="width: 140px;">
                                <div>车号(箱号)</div>
                            </div>
                            <div class="padd12 bor_r bor_b center" style="width: 100px;">
                                <div>件数</div>
                            </div>
                            <div class="padd12  bor_b center" style="width: 100px;">
                                <div>重量</div>
                            </div>
                            
                            <!-- {{list[0].goods_data[0]}} -->
                            
                        </div>
                        <div class="flex " v-for="(ite,ind) in item" :key="index"> 
                            <div class="padd12 bor_r bor_b center" style="width: 80px;">
                                <div>{{ind + 1}}</div>
                            </div>
                            <div class="padd12 bor_r bor_b center" style="width: 140px;">
                                <div>{{ite.prediction.yundanhao}}</div>
                            </div>
                            <div class="padd12 bor_r bor_b center flex_1" style="width: 140px;">
                                <div>{{ite.prediction.goods_name}}</div>
                            </div>
                            <div class="padd12 bor_r bor_b center flex_1" style="width: 140px;">
                                <div>{{props.transport_type == 1?ite.prediction.box:ite.prediction.car_no}}</div>
                            </div>
                            <div class="padd12 bor_r bor_b center" style="width: 100px;">
                                <div>{{ite.prediction.number}}</div>
                            </div>
                            <div class="padd12  bor_b center" style="width: 100px;">
                                <div>{{ite.prediction.weight}}</div>
                            </div>
                        </div>
                        <!-- <div class="flex ">
                            <div class="padd12 bor_r  center" style="width: 80px;">
                                <div>备注</div>
                            </div>
                            <div class="padd12   center flex_1" >
                                <div></div>
                            </div>
                        </div> -->
                    </div>
                    <div class="flex justify_between" style="margin-bottom: 8px;">
                        <div>制单员：{{ props.user.nickname }}</div>
                        <div>打印员：</div>
                        <div>客户签字：</div>
                        <div>货物交付时，如未提出异议，视为完好签收</div>
                    </div>
                    <div class="flex justify_center" >
                        <div>(第一联留存联，第二联客户联，第三联提货联)</div>
                    </div>
                </div>
            </div>
        </div>
        <div style="margin-top: 20px;" class="flex justify_end">
            <a-button  type="primary" @click="showCount = true">打印</a-button>
        </div>
      <a-modal
        v-model:visible="showCount"
        width="600px"
        title="提示"
        ok-text="打印"
        :footer="false"
      >
        <div class="flex justify_center align_center" style="height: 100px">
          <div>已打印{{ count }}次，确定打印？</div>
        </div>
        <div class="flex justify_end">
          <a-button v-print="printObj" type="primary">打印</a-button>
        </div>
      </a-modal>
  </div>
</template>

<script setup>
import { defineProps, defineEmits, ref, reactive, onMounted } from "vue";
import predictionDeriverOrder from "@/api/prediction/predictionDeriverOrder";
import tool from "@/utils/tool";
const props = defineProps({
  row: Array,
  user: Object,
  deptName: String,
  pick_typeid: Number,
  process_time: String,
  transport_type: Number
});
const type = ref("1"); // 1 集装箱   2 整车
const list = ref([]);
const count = ref(0);
const showCount = ref(false);
const prinType = ref('1')   // 1 A4纸   2 1/2A4纸  3 1/3 A4纸
const lists = ref([])
const prinOptions = ref([
    { label: 'A4纸', value: '1' },
    { label: '1/2 A4纸', value: '2' },
    { label: '1/3 A4纸', value: '3' },
])
const printObj = {
  id: "tihuoContent",
  popTitle: "页面打印",
  openCallback: (vue) => {
    predictionDeriverOrder
       .getCount({ type: 5, link_id: props.row.id})
       .then((res) => {
            console.log(res)
            count.value = res.data.count
        }); 
 }
}
 const splitArray = (arr,type) =>{
     //  1  22  2  7   3 
     const result = [];
     let num = 0
     if(type == 1){
        num = 22 
     }else if(type == 2){
         num = 7
     }else if(type == 3){
         num = 3
     }
     for (let i = 0; i < arr.length; i += num) {
         result.push(arr.slice(i, i + num));
     }
     return result;
  }
  watch(
    prinType,
    (newVal, oldVal) => {
        list.value = splitArray(lists.value,newVal)
    }
    
 )
 onMounted(()=>{
    lists.value = JSON.parse(JSON.stringify(props.row)).detail
    lists.value.map((v,i)=>{
        v.prediction.number = v.prediction.number_yu
        v.prediction.weight = v.prediction.weight_yu - 0
    })
    let newArr = splitArray(lists.value,prinType.value)
    list.value = newArr
    handlegetCount()
 })
</script>

<style lang="less" scoped>
.scllo{
    overflow-y: scroll;
    height: 700px;
    scrollbar-width: none;
}
.scllo::-webkit-scrollbar {
    display: none; /* Chrome, Safari, Edge */
}
// 修改.box基础样式
.box{
    width: 242mm;
    height: 120mm;
    padding: 10mm 12mm;
    box-sizing: border-box;
    position: relative;
}
@media print {
    .box {
        margin-bottom: 0 !important;
        page-break-after: always !important;
    }
}
.page-break{
    page-break-before: always;
}
.logoImg{
    position: absolute;
    top: 10mm;
    width: 200px;
}
.border{
    border: 1px solid rgba(0,0,0,1);
    border-bottom: 0px solid rgba(0,0,0,1);
}
.bor_r {
  border-right: 1px solid rgba(0, 0, 0, 1);
}
.bor_b {
  border-bottom: 1px solid rgba(0, 0, 0, 1);
}
.padd12 {
  padding: 3mm 10px;
  box-sizing: border-box;
}
.text_center {
  text-align: center;
}
.center {
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>
